<template>

<div class="matchResult">
  <div class="table">
    <a-table :columns="columns" :pagination="false" :data-source="data"></a-table>
  </div>


  <div class="tab-container">
    <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: activeTab === index }"
        @click="setActiveTab(index)"
    >
      {{ tab }}
      <div v-if="activeTab === index" class="underline">
      </div>
    </div>
  </div>
  <div class="chat" v-if="tabs.length">
    <!--      <MatchChat :chatId="chatId" />-->
    <!--      <Lineup/>-->
    <div v-if="activeTab === 0" class="cruxEvent">
      <a-collapse v-model:activeKey="activeKey" :expandIconPosition="expandIconPosition">
        <a-collapse-panel key="1" header="上半场 5-2">
<!--          <CriticalIncidentSlot-->
<!--              :arrDataIcon="eventLegendIcon"-->
<!--              :arrData="eventBall.secondHalf"-->
<!--          />-->
          <div class="criticalIncidentSlot">
            <div class="item flex">
              <div class="icon flex">
                <img src="@/assets/icons/score/corner.webp" alt="">
                <span>60'</span>
              </div>
              <div class="score">全场5-2</div>
              <div class="center">第7个角球</div>
            </div>
            <div class="item flex right">
              <div class="center">黄牌，全场第1张</div>
              <div class="score" style="font-size: 12px;">卢卡-苏希奇</div>
              <div class="icon flex">
                <img src="@/assets/icons/score/yellow_card.webp" alt="">
                <span>45'</span>
              </div>
            </div>
            <div class="item flex right">
              <div class="center">第6个角球</div>
              <div class="score">全场5-2</div>
              <div class="icon flex">
                <img src="@/assets/icons/score/corner.webp" alt="">
                <span>25'</span>
              </div>
            </div>
          </div>
          <template #extra><setting-outlined @click="handleClick" /></template>
        </a-collapse-panel>

      </a-collapse>
    </div>

    <div v-else class="statistics">
      <p class="title">比赛信息</p>
      <div class="border_event" style="margin-top: 9px;margin-bottom: 16px;"></div>
      <div class="referee">
        <div class="referee-name flex mt-10">
          <span class="name">当值主裁</span>
          <span class="key">莫德里奇</span>
        </div>
        <div class="penaltyCard mt-10">
          <p class="name">场均罚牌</p>
          <div>
            <p>
              <img src="@/assets/icons/score/red_card.webp" alt="">
              <span class="key">2</span>
            </p>
            <p>
              <img src="@/assets/icons/score/yellow_card.webp" alt="">
              <span class="key">2</span>
            </p>
          </div>
        </div>
      </div>

      <div class="border_event" style="margin: 16px 0;"></div>
      <div class="info">
        <p class="flex mt-10">
          <span class="name">比赛场馆</span>
          <span class="key">红牛竞技场</span>

        </p>
        <p class="flex mt-10">
          <span class="name">比赛地点</span>
          <span class="key">德国</span>
        </p>
        <p class="flex mt-10">
          <span class="name">现场观众人数</span>
          <span class="key">10W</span>
        </p>
      </div>

    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import {mockData_event} from "@/views/live-detail/footballComponents/eventLegendStatus";
import LineupList from "@/views/scoreFootball/components/lineupList.vue";
import {onMounted, reactive, ref, watch} from "vue";
import {getMatchFootballEventAPI} from "@/api/match";
import CriticalIncidentSlot from "./criticalIncidentSlot.vue";


const columns = [

  {
    title: '比赛对阵',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  },
  {
    title: '上',
    dataIndex: 'age',
    key: 'age',
    ellipsis: true,
  },
  {
    title: '下',
    dataIndex: 'address',
    key: 'address',
    ellipsis: true,
  },
  {
    title: '全场',
    dataIndex: 'tags',
    key: 'tags',
    ellipsis: true,
    width: 80,
    render: () => {
      return {
        style: {'color': 'red'}
      }
    }
  }
];

const data = [
  {
    key: '1',
    name: '阿尔纳泽马',
    age: 0,
    address: '0',
    tags: 3
  },
  {
    key: '1',
    name: '艾美德',
    age: 0,
    address: '0',
    tags: 3
  },

];

const activeTab = ref(0)
const tabs: any = ref([
    '关键事件','技术统计'
])

const setActiveTab = (index: number) => {
  activeTab.value = index
}


const activeKey = ref(['1']);
const expandIconPosition = ref('right');

const eventLegendIcon: any = {
  9: { key: 9, name: '进球', src: '/src/assets/icons/score/goal.webp' },
  0: { key: 0, name: '点球', src: '/src/assets/icons/score/penalty.webp' },
  7: { key: 0, name: '点球不进', src: '/src/assets/icons/score/penalty_miss.webp' },
  1: { key: 1, name: '比赛开始', src: '/src/assets/icons/score/whistle.webp' },
  34: { key: 34, name: '默认', src: '/src/assets/icons/score/default_score.webp' },
  2: { key: 0, name: '乌龙球', src: '/src/assets/icons/score/own_goal.webp' },
  30: { key: 30, name: '角球', src: '/src/assets/icons/score/corner.webp' },
  3: { key: 0, name: '助攻', src: '/src/assets/icons/score/assist.webp' },
  18: { key: 18, name: '黄牌', src: '/src/assets/icons/score/yellow_card.webp' },
  default: { key: 0, name: '红牌', src: '/src/assets/icons/score/red_card.webp' },
  21: { key: 21, name: '两黄一红', src: '/src/assets/icons/score/yellow_red_card.webp' },
  23: { key: 23, name: '换人', src: '/src/assets/icons/score/substitution.webp' },
  5: { key: 0, name: '受伤', src: '/src/assets/icons/score/injury.webp' },
  6: { key: 0, name: 'VAR', src: '/src/assets/icons/score/var.webp' }
}

const eventBall: any = reactive({
  firstHalf: [], // 上半场
  secondHalf: [] // 下半场
})


const handleClick = (event: MouseEvent) => {
  // If you don't want click extra trigger collapse, you can prevent this:
  event.stopPropagation();
};

const noneInfo = ref(false)


const getKeyEvents = () => {
  // let matchId = route.query.id
  let matchId = '10902407'
  getMatchFootballEventAPI({ matchId }).then((res) => {
    // eventId 0:暂无比赛消息  1：比赛开始  13：中场休息  3：比赛结束
    // let data = res.data


    console.log(mockData_event, '-mockData_event-');

    let data = mockData_event
    if (data.length === 1 && data[0].eventId === 0) return (noneInfo.value = true)
    let dataEvent = data.filter((item: any) => ![1, 0, 3].includes(item.eventId))
    let halftimeIndex = dataEvent.findIndex((item: any) => item.eventId === 13)
    if (halftimeIndex === -1) {
      eventBall.firstHalf = [...dataEvent]
    } else {
      eventBall.secondHalf = [...dataEvent.slice(0, halftimeIndex - 1)]
      eventBall.firstHalf = [...dataEvent.slice(halftimeIndex)]
    }
  })
}

onMounted(() => {
  getKeyEvents()
})

</script>

<style scoped lang="scss">

.matchResult {

  padding: 20px 16px;

  .table {
    //#F6F8FF
    :deep(.ant-table-thead th) {
      background-color: #F6F8FF;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #AFB8CB;
    }
    :deep(.ant-table-tbody td) {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #525A79;
      background-color: #fff;
    }
  }

  .tab-container {
    display: flex;
     justify-content: space-around;
    padding: 10px 0;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
  }
  .tab {
    position: relative;
    padding: 5px 20px;
    font-size: 14px;
    cursor: pointer;
    color: rgba(175, 184, 203, 1);
    text-align: center;
  }

  .tab.active {
    color: rgba(22, 177, 58, 1);
    font-weight: bold;
  }

  .underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: rgba(22, 177, 58, 1);
    border-radius: 1px;
  }

  .cruxEvent {
    :deep(.ant-collapse-header) {
      background-color: #DDECFF;
      border-radius: 8px;
    }
    :deep(.ant-collapse ) {
      border: none;
    }
    :deep(.ant-collapse-content-active) {
      background-color: #F6F8FF;
      border-top: none;
    }

    .flex {
      display: flex;
      justify-content: left;
    }
    .criticalIncidentSlot {
      .item.right {justify-content: right;}
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .icon {
          align-items: center;
          img  {
            width: 16px;
            height: 16px;
          }
          span {
            font-weight: 400;
            font-size: 12px;
            color: #AFB8CB;
          }
        }
        .score {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #525A79;
          margin: 0 34px;
        }
        .center {
          font-weight: 400;
          font-size: 12px;
          color: #AFB8CB;
        }
      }
    }

    .statistics {
      width: 408px;
      height: 300px;
      background: #F6F8FF;
      border-radius: 8px 8px 8px 8px;
    }
  }

  .statistics {
    padding: 10px 20px;
    height: 300px;
    background: #F6F8FF;
    border-radius: 8px 8px 8px 8px;
    .border_event {
      height: 1px;
      background: #E2EEFF;
      border-radius: 0px 0px 0px 0px;
    }
    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #AFB8CB;
    }
    .key {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #525A79;
    }

    .flex {
      display: flex;
      justify-content: space-between;
    }
    .mt-10 {
      margin-top: 10px;
    }
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #AFB8CB;
    }
    .referee {
      .referee-name {

      }
    }

    .penaltyCard {
      display: flex;
      justify-content: space-between;
      div {
        display: flex;
        p {
          display: flex;
          align-items: center;
          margin-right: 16px;
          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
        }

      }
      p {
        display: flex;
      }
    }
  }
}


</style>
